<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    .el-header, .el-footer {
      background-color: #B3C0D1;
      color: #333;
      text-align: center;
      line-height: 60px;
    }
    .el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      line-height: 160px;
      height: 1953px;
      width: 980px;
    }
    .el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      line-height: 200px;
      weight:300px;
      height: 1000px;
    }
    #heng{
      background-color: white;

    }
    .c1{

    }
    .el-tabs__nav-scroll {
      height: 100px;
      overflow: hidden;
    }
    .el-tabs__item {
      padding: 0 20px;
      height: 40px;
      box-sizing: border-box;
      line-height: 40px;
      display: inline-block;
      list-style: none;
      font-size: 35px;
      font-weight: 500;
    }
  </style>
</head>
<body>
<div id="app">
<div>
  <div>
    <img src="imgs/15fa3524258124576c8cbc0765c3bc0b.png" width="980px" alt="">
  </div>
    <el-main>
      <el-tabs v-model="activeName" style="height: 1000px;font-size: 24px;background-color: white" type="card" @tab-click="handleClick">
        <el-tab-pane label="点单" name="first" class="c1">
          <el-tabs :tab-position="tabPosition" style="height: 1000px">
            <el-tab-pane label="商家推荐">商家推荐</el-tab-pane>
            <el-tab-pane label="凉菜">凉菜</el-tab-pane>
            <el-tab-pane label="炒菜">炒菜</el-tab-pane>
            <el-tab-pane label="烧菜">烧菜</el-tab-pane>
            <el-tab-pane label="主食">主食</el-tab-pane>
            <el-tab-pane label="酒水">酒水</el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="套餐" name="second" class="c1">套餐</el-tab-pane>
        <el-tab-pane label="评价" name="third" class="c1">评价</el-tab-pane>
        <el-tab-pane label="详情" name="fourth" class="c1">详情</el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>

</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function () {
      return {
        activeIndex2: '1',
        arr:["点单","套餐","评价","详情"],
        activeName: 'first',
        currentIndex:"1-1",
        categoryArr:[],
        bannerArr:[],
        productArr:[],
        tabPosition: 'left'
      }
    },
    methods: {
      handleSelect(key, keyPath) {
        /*key代表选择的位置, keyPath代表完整的位置路径*/
        console.log(key, keyPath);
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
    }
  })
</script>
</html>